import React from 'react'
import SetButton from '../SetBtton'
import { inject, observer } from 'mobx-react'
import {message} from 'antd'

const HOCStoreList = WarpComponent => {
    @inject('setStoreInfo')
    @observer
    class ElementComponent extends React.Component {
        state = {
            data: [],
            columns: [
                {
                    title: "门店名称",
                    dataIndex: "storeName",
                    align:'center'
                },
                {
                    title: "手机号码",
                    dataIndex: "telNumber",
                    align:'center'
                },
                {
                    title: "详细地址",
                    dataIndex: "storeAdd",
                    align:'center'
                },
                {
                    title: "门店描述",
                    dataIndex: "storeDesc",
                    align:'center'
                },
                {
                    title: "操作",
                    align:'center',
                    render: (text,record) => (
                        <div>
                            <SetButton txt="修改" onClick={()=>this.modifyBtn(text,record)}></SetButton>
                            <SetButton txt="删除" onClick={()=>this.delStoreBtn(text, record)}></SetButton>
                            <SetButton txt="绑定管理员" onClick={this.gainManager}></SetButton>
                        </div>
                    ),
                },
            ],
            pagination: {
                defaultCurrent: 1,
                defaultPageSize: 5,
                hideOnSinglePage: true
            },
            isModalVisible: false,
            modelTitle: null,
            url:null
        }

        componentDidMount() {
            //初始化
            this.initData()
        }

        //初始化
        initData = () => {
            let { queryStoreList } = this.props.setStoreInfo
            queryStoreList().then(data => {
                if (data.data.code === 200) {
                    let allData = data.data.data
                    allData.forEach(element => {
                        element.key = element.storeSetupId
                    });
                    let obj = this.state
                    obj.data = allData
                    this.setState(obj)
                }else{
                    message.error('查询数据失败')
                }
            })
        }
        //显示模态框
        showModel=(title)=>{
            let obj = this.state
            obj.isModalVisible = true
            obj.modelTitle = title
            this.setState(obj)
        }
        //添加门店列表
        addStoreBtn = async () => {
            await this.showModel('添加门店')
            let { formOne } = this.refs.form.refs
            let initObj = {
                storeName: '',
                telNumber: '',
                storeAdd: '',
                storeDesc: ''
            }
            formOne.setFieldsValue(initObj)
        }
        //修改按钮
        modifyBtn= async (text,record)=>{
            await this.showModel('修改门店信息')
            let {formOne} = this.refs.form.refs
            formOne.setFieldsValue(record)
        }
        handleOk = () => {
            if (this.state.modelTitle === '添加门店') {
                this.sureAdd()
            }else{
                this.sureModify()
            }
        }
        //取消or关闭
        handleCancel = () => {
            let obj = this.state
            obj.isModalVisible = false
            this.setState(obj)
        }
        //删除按钮
        delStoreBtn=(text,record)=>{
            let {storeSetupId} = record
            let obj = {storeSetupId}
            let {delStoreList} = this.props.setStoreInfo
            delStoreList(obj).then(data=>{
                if (data.data.code === 200) {
                    message.success('删除成功')
                    this.initData()
                }else{
                    message.error('删除失败')
                }
            })
        }
        //绑定管理员
        gainManager= async ()=>{
            await this.showModel('绑定管理员')
            let {getErWeiMa} = this.props.setStoreInfo
            getErWeiMa().then(data=>{
                if (data.data.code === 200) {
                    let allData = data.data.data
                    let obj = this.state
                    obj.url = allData
                    this.setState(obj)
                }else{
                    message.error('请求二维码失败')
                }
            })
        }

        //确认添加
        sureAdd = () => {
            let { formOne } = this.refs.form.refs
            let key = [
                "storeName",
                "telNumber",
                "storeAdd",
                "storeDesc"
            ]
            let formData = formOne.getFieldsValue(key)
            let {addStoreList} = this.props.setStoreInfo
            addStoreList(formData).then(data=>{
                if (data.data.code === 200) {
                    message.success('添加成功')
                    this.handleCancel()
                    this.initData()
                }else{
                    message.error('添加失败')
                }
            })
        }
        //确认修改
        sureModify=()=>{
            let key = [
                "storeSetupId",
                "storeName",
                "telNumber",
                "storeAdd",
                "storeDesc"
            ]
            let {formOne} = this.refs.form.refs
            let formData = formOne.getFieldsValue(key)
            let {modifyStoreList} = this.props.setStoreInfo
            modifyStoreList(formData).then(data=>{
                if (data.data.code === 200) {
                    message.success('修改成功')
                    this.handleCancel()
                    this.initData()
                }else{
                    message.error('修改失败')
                }
            })
        }
        


        render() {
            let methods = {
                addStoreBtn: this.addStoreBtn,
                handleOk: this.handleOk,
                handleCancel: this.handleCancel
            }
            return (
                <div>
                    <WarpComponent ref='form' {...this.state} {...methods}></WarpComponent>
                </div>
            );
        }
    }
    return ElementComponent
}

export default HOCStoreList